import React from 'react';
import { Button, Dialog, Input, Pagination, Table } from '@alifd/next';
import { useFusionTable } from 'ahooks';
import scheduleService from '@/services/schedule';
import styles from './index.module.scss';

const LogList = (props) => {
  const { tableProps, paginationProps, search } = useFusionTable(scheduleService.logList, {
    defaultPageSize: 15,
    cacheKey: 'tableProps',
    formatResult: (response) => {
      return {
        list: response.page.list,
        total: response.page.totalCount,
      };
    },
  });
  return (
    <Dialog title="日志列表" footer={false} closeMode={['close', 'esc', 'mask']} style={{ width: '80%' }} {...props}>
      <Input placeholder="任务ID" style={{ marginRight: 10 }} />
      <Button type="normal">查询</Button>
      <Table useVirtual className={styles.table} {...tableProps} maxBodyHeight={500} size="small" isZebra>
        <Table.Column title="日志ID" dataIndex="logId" sortable />
        <Table.Column title="任务ID" dataIndex="jobId" sortable />
        <Table.Column title="bean名称" dataIndex="beanName" sortable />
        <Table.Column title="参数" dataIndex="params" />
        <Table.Column title="状态" dataIndex="status" sortable />
        <Table.Column title="耗时(单位：毫秒)" dataIndex="times" sortable />
        <Table.Column title="执行时间" dataIndex="createTime" sortable />
      </Table>
      <Pagination style={{ marginTop: '1rem' }} {...paginationProps} />
    </Dialog>
  );
};

export default LogList;
